import React, { Component } from 'react'
import empty from "../../assets/images/cart.jpg"
import "./Cart.css"
export default class Cart extends Component {
  state = {
    carts: []
  }
  // 获取本地缓存的中购物车数据
  componentDidMount() {
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]")
    this.setState({
      carts
    })
  }

  render() {
    return (
      <div className="yg-cart">
        {/* 头部开始 */}
        <div className="yg-cart-head">

          <span>购物车</span>
        </div>
        {/* 头部结束 */}

        {
          !!this.state.carts.length ?
            <div className="cart-content">
              {this.state.carts.map((v, i) => {
                return (
                  <div
                    className="yg-cart-show-list"
                    key={v.goods_id}
                  >
                    <div className="show-left">
                      <i className="iconfont icon-unselected"></i>
                    </div>
                    <div className="show-center">
                      <img src={v.goods_small_logo} alt="" />
                    </div>
                    <div className="show-right">
                      <div className="right-top">
                        <span className="right-top-title">{v.goods_name}</span>
                      </div>
                      <div className="right-bottom">
                        <div className="bottom-price">￥{v.goods_price}</div>
                        <div className="bottom-btn">
                          <i className="iconfont icon-jjian-"></i>
                          <div className="num">{v.num}</div>
                          <i className="iconfont icon-jia"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
              {/* 底部结算开始 */}
              <div className="cart-toSub">
                <div className="toSub-left">
                  <i className="iconfont icon-unselected"></i>
                  <div className="selectAll">全选</div>
                  <div className="Price">
                    合计:<div className="totalPrice">￥3199</div>
                  </div>
                </div>
                <div className="toSub-right">
                  <span className="toSub">去结算</span>
                </div>
              </div>
              {/* 底部结算结束 */}
            </div>
            : <div className="yg-cart-empty">
              <img src={empty} className="cart-empty-img" alt="" />
              <h3 className="empty_text">
                <a href="#/category">去逛逛...</a>
              </h3>
            </div>

        }
      </div>
    )
  }
}
